<link rel="stylesheet" type="text/css" href="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.css" />
<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 9]>
<script language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/excanvas.min.js"  charset="utf-8"></script>
<![endif]-->
<script type="text/javascript"	src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js"></script>


<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pointLabels.min.js"></script>
    <script class="include" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/chart/jqplot/barDemo.js" />


<div id="barDemo">
	<div title="API">
 	 <div>
 	 	<samp><h2>总体说明：</h2></samp> 
		<div style='padding-left:30px'>
			jqPlot 支持数十种图形，且支持动画、钻取、拖拽、缩放调整，并不限于Ccay提供的Demo，Ccay 提供的API的skin属性完全兼容jqplot原生的option，可以实现所有jqPlot图形效果。
			完整的jqPlot Demo列表参考：http://www.jqplot.com/deploy/dist/examples/，可以直接拷贝其option使用。
		</div>
 	 	<samp><h2>options属性说明：</h2></samp> 
		<div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">			
					<li class="ccay-form-row">
						<samp><h3>初始化属性</h3></samp> 
				    	<span class="ccay-form-input">
				    		<h3>描述</h3> 
				    	</span>
					</li>
					
					<li class="ccay-form-row">
						<samp>ajax</samp> 
				    	<span class="ccay-form-input">设置数据请求查询参数，具体设置与框架其他ajax参数类似，具体可参考jquery的ajax参数说明</span>
					</li>
					<li class="ccay-form-row">
						<samp>data: array</samp> 
				    	<span class="ccay-form-input">直接提供图标的静态数据集合，如果不需要转换，可以将dataConvert参数设置为false</span>
					</li>
					<li class="ccay-form-row">
						<samp>dataConvert: boolean</samp> 
				    	<span class="ccay-form-input">是否开启数据转换，默认开启</span>
					</li>
					<li class="ccay-form-row">
						<samp>convertFields: array</samp> 
				    	<span class="ccay-form-input">field数组，数据转换开启后，可指定需要从ajax列表中取用的字段列表，按顺序排列，最终生成array的格式将参考fields的顺序生成</span>
					</li>
					<li class="ccay-form-row">
						<samp>convertArrayType: number</samp> 
				    	<span class="ccay-form-input">list转换成数组，有两种格式，默认为1<br>第一种为：[[125,”1月”][120,”2月”] [130,”3月”]…]<br>第二种为：[[125,120,130][“1月”,”2月”,”3月”]…]</span>
					</li>
					<li class="ccay-form-row">
						<samp>fnConvert: function</samp> 
				    	<span class="ccay-form-input">自定义数据转换接口.该接口有一个形参，形参为ajax请求返回的数据或直接提供的静态数据</span>
					</li>
					<li class="ccay-form-row">
						<samp>skin:object</samp> 
				    	<span class="ccay-form-input">图标风格配置对象，进行jqplot初始化前，用户的配置需要继承skin配置的对象</span>
					</li>
				</div>
			</form>
		</div>
		<samp><h2>options.skin.title属性说明：</h2></samp> 
		<div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">			
					<li class="ccay-form-row">
						<samp><h3>初始化属性</h3></samp> 
				    	<span class="ccay-form-input">
				    		<h3>描述</h3> 
				    	</span>
					</li>
					
					<li class="ccay-form-row">
						<samp>text: string</samp> 
				    	<span class="ccay-form-input">设置当前图的标题</span>
					</li>
					<li class="ccay-form-row">
						<samp>show: boolean</samp> 
				    	<span class="ccay-form-input">设置当前标题是否显示</span>
					</li>
				</div>
			</form>
		</div>
		<samp><h2>options.skin.seriesDefaults属性说明：</h2></samp> 
			<div style='padding-left:30px'>
				 <form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">	
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						<li class="ccay-form-row">
							<samp>label：string</samp> 
					    	<span class="ccay-form-input">设置显示在分类名称框中的分类名称 </span>
						</li>
						<li class="ccay-form-row">
							<samp>color: color</samp> 
					    	<span class="ccay-form-input">分类在图标中表示（折现，柱状图等）的颜色 </span>
						</li>
						<li class="ccay-form-row">
							<samp>shadow: boolean</samp> 
					    	<span class="ccay-form-input">各图在图表中是否显示阴影区域</span>
						</li>
						<li class="ccay-form-row">
							<samp>showMarker: boolean</samp> 
					    	<span class="ccay-form-input">是否强调显示图中的数据节点</span>
						</li>
						<li class="ccay-form-row">
							<samp>renderer</samp> 
					    	<span class="ccay-form-input">利用渲染器（这里是利用饼图PieRenderer）渲染现有图表，从而转换成所需图表</span>
						</li>
						<li class="ccay-form-row">
							<samp>rendererOptions</samp> 
					    	<span class="ccay-form-input">传给上个属性所设置渲染器的option对象，线状图的渲染器没有option对象</span>
						</li>
					  </div>
				 </form>
			</div>
			<samp><h2>bars柱图设置</h2></samp> 
			  <div style='padding-left:30px'>
				 <form id="param" class="init ccay-form">
				  <div class="ccay-form-body ccay-form-custom">	
				  	<li class="ccay-form-row">
						<samp><h3>初始化属性</h3></samp> 
				    	<span class="ccay-form-input">
				    		<h3>描述</h3> 
				    	</span>
					</li>
					<li class="ccay-form-row">
						<samp>barPadding：number</samp> 
				    	<span class="ccay-form-input">设置同一分类两个柱状条之间的距离（px）</span>
					</li>
					<li class="ccay-form-row">
						<samp>barPadding：number</samp> 
				    	<span class="ccay-form-input">设置同一分类两个柱状条之间的距离（px）   </span>
					</li>
					<li class="ccay-form-row">
						<samp>barMargin：number</samp> 
				    	<span class="ccay-form-input">设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上） </span>
					</li>
					<li class="ccay-form-row">
						<samp>barDirection: 'vertical' or 'horizontal'</samp> 
				    	<span class="ccay-form-input">设置柱状图显示的方向：垂直显示和水平显示，默认垂直显示 vertical or horizontal. </span>
					</li>
					<li class="ccay-form-row">
						<samp>barWidth: number</samp> 
				    	<span class="ccay-form-input">设置柱状图中每个柱状条的宽度   </span>
					</li>
					<li class="ccay-form-row">
						<samp>shadowOffset: number</samp> 
				    	<span class="ccay-form-input">同grid相同属性设置 </span>
					</li>shadowDepth: number
					<li class="ccay-form-row">
						<samp>shadowDepth: number</samp> 
				    	<span class="ccay-form-input">同grid相同属性设置 </span>
					</li>
					<li class="ccay-form-row">
						<samp>shadowAlpha: number</samp> 
				    	<span class="ccay-form-input">同grid相同属性设置 </span>
					</li>
					</div>
				  </form>
				</div>
				<samp><h2>options.skin.axisDefaults属性设置：</h2></samp> 
			<div style='padding-left:30px'>
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">			
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						
						<li class="ccay-form-row">
							<samp>min</samp> 
					    	<span class="ccay-form-input">横（纵）坐标显示的最小值</span>
						</li>
						<li class="ccay-form-row">
							<samp>max</samp> 
					    	<span class="ccay-form-input">横（纵）坐标显示的最大值</span>
						</li>
						<li class="ccay-form-row">
							<samp>pad: number,flot</samp> 
					    	<span class="ccay-form-input">一个相乘因子，（数据在横（纵）轴上最大值-数据在横（纵）轴上最小值）*pad值=该轴显示的横（纵）坐标区间长度， 该轴显示的横（纵）坐标区间长度=横（纵）坐标显示的最大值-横（纵）坐标显示的最小值，如果设置了max和min的值的话，那么会优先考虑min和max设置的值</span>
						</li>
						<li class="ccay-form-row">
							<samp>ticks: []</samp> 
					    	<span class="ccay-form-input">设置横（纵）坐标的刻度上的值，可为该ticks数组中的值，a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]</span>
						</li>
						<li class="ccay-form-row">
							<samp>numberTicks</samp> 
					    	<span class="ccay-form-input">一个相除因子，用于设置横（纵）坐标刻度间隔,横（纵）坐标刻度间隔值=横（纵）坐标区间长度/(numberTicks-1)，横（纵）坐标刻度间隔值，可为日期字符串</span>
						</li>
						<li class="ccay-form-row">
							<samp>tickInterval: string</samp> 
					    	<span class="ccay-form-input">横（纵）坐标刻度间隔值，可为日期字符串</span>
						</li>
						<li class="ccay-form-row">
							<samp>renderer</samp> 
					    	<span class="ccay-form-input">设置横（纵）轴上数据加载的渲染器,有dateAxisRenderer</span>
						</li>
						<li class="ccay-form-row">
							<samp>rendererOptions：{}</samp> 
					    	<span class="ccay-form-input">设置renderer的Option配置对象，线状图不需要设置，不同图表的Option配置对象   </span>
						</li>
						<li class="ccay-form-row">
							<samp>tickOptions：{}</samp> 
					    	<span class="ccay-form-input"></span>
						</li>
						<li class="ccay-form-row">
							<samp>showTicks: boolean</samp> 
					    	<span class="ccay-form-input">是否显示刻度线以及坐标轴上的刻度值   </span>
						</li>
						<li class="ccay-form-row">
							<samp>showTickMarks：boolean</samp> 
					    	<span class="ccay-form-input">设置是否显示刻度  </span>
						</li>
						<li class="ccay-form-row">
							<samp>useSeriesColor: boolean</samp> 
					    	<span class="ccay-form-input">如果有多个纵（横）坐标轴，通过该属性设置这些坐标轴是否以不同颜色显示 </span>
						</li>
					</div>
				</form>
			</div>
			<samp><h2>options.skin.axisDefaults.tickOptions属性设置：</h2></samp> 
			<div style='padding-left:30px'>
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">			
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						
						<li class="ccay-form-row">
							<samp>mark: 'outside' or 'inside' or 'cross'</samp> 
					    	<span class="ccay-form-input">设置横（纵）坐标刻度在坐标轴上显示方式，分为坐标轴内，外，穿过坐标轴显示值也分为：'outside', 'inside' 和 'cross'</span>
						</li>
						<li class="ccay-form-row">
							<samp>showMark: boolean</samp> 
					    	<span class="ccay-form-input">设置是否显示刻度</span>
						</li>
						<li class="ccay-form-row">
							<samp>showGridLine: boolean</samp> 
					    	<span class="ccay-form-input">是否在图表区域显示刻度值方向的网格线 </span>
						</li>
						<li class="ccay-form-row">
							<samp>markSize: number</samp> 
					    	<span class="ccay-form-input">每个刻度线顶点距刻度线在坐标轴上点距离（像素为单位），如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点，刻度线与坐标轴 在刻度线中间交叉，那么这时这个距离×2</span>
						</li>
						<li class="ccay-form-row">
							<samp>show: boolean</samp> 
					    	<span class="ccay-form-input">是否显示刻度线，与刻度线同方向的网格线，以及坐标轴上的刻度值</span>
						</li>
						<li class="ccay-form-row">
							<samp>showLabel: boolean</samp> 
					    	<span class="ccay-form-input">是否显示刻度线以及坐标轴上的刻度值 </span>
						</li>
						<li class="ccay-form-row">
							<samp>formatString</samp> 
					    	<span class="ccay-form-input">设置坐标轴上刻度值显示格式，eg:'%b %#d, %Y'表示格式"月 日，年"，"AUG 30,2008"</span>
						</li>
						<li class="ccay-form-row">
							<samp>fontSize：string</samp> 
					    	<span class="ccay-form-input">刻度值的字体大小  </span>
						</li>
						<li class="ccay-form-row">
							<samp>fontFamily：string</samp> 
					    	<span class="ccay-form-input">刻度值上字体</span>
						</li>
						<li class="ccay-form-row">
							<samp>angle: number</samp> 
					    	<span class="ccay-form-input">刻度值与坐标轴夹角，角度为坐标轴正向顺时针方向 </span>
						</li>
						<li class="ccay-form-row">
							<samp>fontWeight: string</samp> 
					    	<span class="ccay-form-input">字体的粗细 </span>
						</li>
						<li class="ccay-form-row">
							<samp>fontStretch: number</samp> 
					    	<span class="ccay-form-input">刻度值在所在方向（坐标轴外）上的伸展(拉伸)度  </span>
						</li>
					</div>
				</form>
			</div>
			<samp><h2>options.skin.grid属性设置：</h2></samp> 
		    <div style='padding-left:30px'>
				<form id="param" class="init ccay-form">
				  <div class="ccay-form-body ccay-form-custom">
				  	<li class="ccay-form-row">
						<samp><h3>初始化属性</h3></samp> 
				    	<span class="ccay-form-input">
				    		<h3>描述</h3> 
				    	</span>
					</li>	
					<li class="ccay-form-row">
						<samp>gridLineColor: color</samp> 
				    	<span class="ccay-form-input">设置整个图标区域网格背景线的颜色 </span>
					</li>
					<li class="ccay-form-row">
						<samp>background: color</samp> 
				    	<span class="ccay-form-input">设置整个图表区域的背景色</span>
					</li>
					<li class="ccay-form-row">
						<samp>borderColor: color</samp> 
				    	<span class="ccay-form-input">设置图表的(最外侧)边框的颜色</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>borderWidth: number</samp> 
				    	<span class="ccay-form-input">设置图表的（最外侧）边框宽度</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadow: boolean</samp> 
				    	<span class="ccay-form-input">为整个图标（最外侧）边框设置阴影，以突出其立体效果 </span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadowAngle: number</samp> 
				    	<span class="ccay-form-input">设置阴影区域的角度，从x轴顺时针方向旋转</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadowOffset: number</samp> 
				    	<span class="ccay-form-input">设置阴影区域偏移出图片边框的距离 </span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadowWidth: number</samp> 
				    	<span class="ccay-form-input">设置阴影区域的宽度</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadowDepth: number</samp> 
				    	<span class="ccay-form-input">设置影音区域重叠阴影的数量</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadowAlpha: number</samp> 
				    	<span class="ccay-form-input">设置阴影区域的透明度</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>renderer</samp> 
				    	<span class="ccay-form-input">用于绘制网格渲染器</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>rendererOptions{}</samp> 
				    	<span class="ccay-form-input">选项传递给渲染。注意默认canvasgridrenderer不需要额外的选项。</span>
					 </li>
					</div>
				</form>
			</div>
			<samp><h2>options.skin.legend属性设置</h2></samp> 
		    <div style='padding-left:30px'>
				<form id="param" class="init ccay-form">
				  <div class="ccay-form-body ccay-form-custom">
				  	<li class="ccay-form-row">
						<samp><h3>初始化属性</h3></samp> 
				    	<span class="ccay-form-input">
				    		<h3>描述</h3> 
				    	</span>
					</li>	
					<li class="ccay-form-row">
						<samp>show: boolean</samp> 
				    	<span class="ccay-form-input">设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）  </span>
					</li>
					<li class="ccay-form-row">
						<samp>location: string</samp> 
				    	<span class="ccay-form-input">分类名称框出现位置, nw, n, ne, e, se, s, sw, w.</span>
					</li>
					<li class="ccay-form-row">
						<samp>xoffset: number</samp> 
				    	<span class="ccay-form-input">分类名称框距图表区域上边框的距离（单位px） </span>
					 </li>
					 <li class="ccay-form-row">
						<samp>yoffset: number</samp> 
				    	<span class="ccay-form-input">设置图表的（最外侧）边框宽度</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>shadow: boolean</samp> 
				    	<span class="ccay-form-input">分类名称框距图表区域左边框的距离(单位px) </span>
					 </li>
					 <li class="ccay-form-row">
						<samp>background: color</samp> 
				    	<span class="ccay-form-input">分类名称框距图表区域背景色</span>
					 </li>
					 <li class="ccay-form-row">
						<samp>textColor: color</samp> 
				    	<span class="ccay-form-input">分类名称框距图表区域内字体颜色   </span>
					 </li>
					</div>
				</form>
			</div>
	 </div>
		<!--  -->
		<br>
			<a onclick="Ccay.Common.toggle(this,'#serviceCodeArea')">需要引入的JS>></a>
			<div id="serviceCodeArea" class="codeArea" style="display:none;">
<pre>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js">&lt/script>

&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.barRenderer.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.categoryAxisRenderer.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pointLabels.min.js">&lt/script>
    &ltscript class="include" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.canvasTextRenderer.min.js">&lt/script>
    &ltscript class="include" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.canvasAxisLabelRenderer.min.js">&lt/script>
    &ltscript class="include" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.canvasAxisTickRenderer.min.js">&lt/script>

&ltscript type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8">&ltscript>
</pre></div>
	</div>
	
	<div title="柱图" tabid="chart">
		<h4><span>柱图例子一</span></h4>
		<div id="chart" style="width:700px; height:300px"></div>
		<span class="ccay-button"   onclick="$('#chart').chartAsImage()">
			<a class="ccay-icon pic"></a>
			<label>保存为图片</label>
		</span>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>柱图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
				$("#chart11").chart2({
		    	   ajax: {
					   url : 'ccay/example/ui/chart/datas2.json'
				   }, 
				   convertArrayType: 2,
				   convertFields:['profit','total'],
		    	   skin: {
		    		 seriesDefaults: {
				         renderer: $.jqplot.BarRenderer, //使用柱状图表示
				         shadow:false,
				         shadowAngle: 135,
				         pointLabels: { show: true},
				         rendererOptions: {
				        	 barPadding: 0,
				             barMargin: 15,   //柱状体组之间间隔
				             barWidth: 25
				         }		          
			         },
			         series:[
		                 {label:'月度利润'},
		                 {label:'月度销售额'}
		             ],
			         axes: {  
			        	  xaxis: {
			        		  ticks: ['January','February','March','April','May', 'June', 'July', 'August'],
				              renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
				              tickRenderer: $.jqplot.CanvasAxisTickRenderer,  
				        	  tickOptions: {
				        	  	  angle: -30
				        	  }
			        	  },
			        	  yaxis: {
				        	  tickOptions: { 
				        		  formatString: "%.2f"
				        	  }
			        	  }
			          },
			          legend: {
			              show: false
			          }
		    	   }
		        });
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
		<h4><span>柱图例子二</span></h4>
 			<div id=chart4 style="width:700px; height:300px"></div>
 			<!-- <span class="ccay-button"   onclick="$('#chart').chartAsImage()">
 				<a class="ccay-icon pic"></a>
 				<label>保存为图片</label>
 			</span> -->
 			<br>
 			<h3>html 源码:</h3>
 			<div class="codeArea">
 				<pre id='html2'>
 	&lt;h4>&lt;span>柱图&lt;/span>&lt;/h4>
 	&lt;div id=chart12>&lt;/div>
 				</pre>
 			</div>
 			<h3>js 源码:</h3>
 			<div class="codeArea">
 				<pre id='js4'>
 					$("#chart12").chart2({
 			    	   ajax: {
 						   url : 'ccay/example/ui/chart/datas2.json'
 					   }, 
 					   convertArrayType: 2,
 					   convertFields:['profit','total'],
 			    	   skin: {
 			    		 seriesDefaults: {
 					         renderer: $.jqplot.BarRenderer, //使用柱状图表示
 					         shadow:false,
 					         shadowAngle: 135,
 					         pointLabels: { show: false},
 			                 showHighlight: true,
 					         rendererOptions: {
 					        	 barPadding: 0,
 					             barMargin: 15,   //柱状体组之间间隔
 					             barWidth: 25
 					         }		          
 				         },
 				         series:[
 			                 {label:'月度利润'},
 			                 {label:'月度销售额'}
 			             ],
 				         axes: {  
 				        	  xaxis: {
 				        		  ticks: ['January','February','March','April','May', 'June', 'July', 'August'],
 					              renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
 					              tickRenderer: $.jqplot.CanvasAxisTickRenderer,  
 					        	  tickOptions: {
 					        	  	  angle: -30
 					        	  }
 				        	  },
 				        	  yaxis: {
 					        	  tickOptions: { 
 					        		  formatString: "%.2f"
 					        	  }
 				        	  }
 				          },
 				          legend: {
 				              show: false
 				          },
 				          /*Highlighter（高亮）设置高亮动作option属性对象,鼠标移动到某个数据点上时，该数据点增大并显示提示信息框 
 				          ,该配置对象直接在option下配置*/
 	                    highlighter: {
 	                    /*show:{boolean}是否显示提示信息栏*/
 		                show: true, 
 		                /*tooltipAxes提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式。*/
 		                tooltipAxes: 'y',
 		                /*sizeAdjust当鼠标移动到数据点上时，数据点扩大的增量增量   */
 		                sizeAdjust: -5 , 
 		                /* tooltipLocation提示信息显示位置（英文方向的首写字母）: n, ne, e, se, s, sw, w, nw. */
 		                tooltipLocation : 'n'
 		            }
 			    	   }
 			        });
 				</pre>
 			</div>
 			<div>
 				<a onclick="Ccay.example.openTry('#barDemo',$('#js4').html(),$('#html2').html())">试一试</a>
 			</div>
	</div>
	
	<div title="横向柱图" tabid="chart1">
		<h4><span>横向柱图</span></h4>
		<div id=chart1 style="width:700px"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html22'>
&lt;h4>&lt;span>横向柱图&lt;/span>&lt;/h4>
&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
				var line1 = [1641, 1626, 929, 217,1088];          
 		    	var line2 = [6371.71, 6619.90, 1853.02, 1108.79, 5245.51];    
 		    	var ticks = ['May', 'June', 'July', 'August'];
 		    	
		       	$("#chart22").chart2({
		    		data: [line1,line2],
		    		skin: {
		    			seriesDefaults: {
			 		         renderer: $.jqplot.BarRenderer, //使用柱状图表示
			 		         shadowAngle: 135,
			 		         pointLabels: { show: true},
			 		         rendererOptions: {
			 		        	 barPadding: 0,
			 		             barMargin: 15,   //柱状体组之间间隔
			 		             barWidth: 25,
			 		             barDirection: "horizontal"
			 		         }		          
		 		         },
		 		         axes: {  
		 		        	  yaxis: {
		 		        		  ticks: ticks,
					              renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
		 			        	  tickOptions: { 
		 			        		  markSize: 0
		 			        	  }
		 		        	  },
		 		        	 xaxis: {
		 			        	 tickOptions: { 
		 			        		 show: false,
				        		   formatString: "%.2f"
		 			        	 }
		 		        	  }
		 		          }
		    		}
		    	});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js2').html(),$('#html22').html())">试一试</a>
		</div>
	</div>
	
	<div title="支持时间格式的x轴" tabid="chart2">
		<div id=chart2 style="width:700px; height:300px"></div>
		<div class="ccay-msg msg-tip"><a class="ccay-msg-icon"></a>
						<span>双击图形回到原始比例。</span>
					</div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html3'>
&lt;div id='time4Xaxis'>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js3'>
				var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000], 
 		            	 [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
           		var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400], 
		            	 [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100], [2011, 17300]];
				$("#time4Xaxis").chart2({
		 			data: [s2, s1],
					skin: {
			            animate: true,
			            animateReplot: true,
			            cursor: {
			                show: true,
			                zoom: true,
			                looseZoom: true,
			                showTooltip: false
			            },
			            series:[
			                {
			                    pointLabels: {
			                        show: true
			                    },
			                    renderer: $.jqplot.BarRenderer,
			                    showHighlight: false,
			                    yaxis: 'y2axis',
			                    rendererOptions: {
			                        animation: {
			                            speed: 2500
			                        },
			                        barWidth: 25,
			                        barPadding: -15,
			                        barMargin: 0,
			                        highlightMouseOver: false
			                    }
			                }, 
			                {
			                    rendererOptions: {
			                        animation: {
			                            speed: 2000
			                        }
			                    }
			                }
			            ],
			            axesDefaults: {
			                pad: 0
			            },
			            axes: {
			                xaxis: {
			                    tickInterval: 1,
			                    drawMajorGridlines: false,
			                    drawMinorGridlines: true,
			                    drawMajorTickMarks: false,
			                    rendererOptions: {
			                    tickInset: 0.5,
			                    minorTicks: 1
			                }
			                },
			                yaxis: {
			                    tickOptions: {
			                        formatString: "$%'d"
			                    },
			                    rendererOptions: {
			                        forceTickAt0: true
			                    }
			                },
			                y2axis: {
			                    tickOptions: {
			                        formatString: "$%'d"
			                    },
			                    rendererOptions: {
			                        alignTicks: true,
			                        forceTickAt0: true
			                    }
			                }
			            },
			            highlighter: {
			                show: true, 
			                showLabel: true, 
			                tooltipAxes: 'y',
			                sizeAdjust: 7.5 , tooltipLocation : 'ne'
			            }
					}
		 		});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js3').html(),$('#html3').html())">试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;width:700px" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
	    <div class="ccay-form-body">
	    	<ul></ul>
		</div>     
		<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>

